{extend name="main"}
{block name="style"}
<style type="text/css">
.w-60px{width: 60px;}
.w-80px{width: 80px;}
.w-150px{width: 150px;}
.wx-wechat{width: 320px;height: 600px;margin: 0 auto;position: relative;border:solid 1px #ddd;overflow:hidden;}
.wx-wechat .wx-wechat-header{width: 100%;height:54px;line-height:54px;background-color: #343434;color: #fff;text-align: center;}
.wx-wechat-body{width:337px;overflow-y: scroll;}
.el-date-editor .el-range-separator{width: auto;}
.wx-wechat-body p{margin-bottom:0;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
	<div class="flex">
		<div class="flex-1 pr-3">
			<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

			  <el-form-item label="推文类型" prop="type">
			    <el-radio-group class="ml-0 ml-sm-2" v-model="form.type"
			    @change="tableData=[];">
			      <el-radio :label="'jobs'">职位</el-radio>
			      <el-radio :label="'company'">企业</el-radio>
			    </el-radio-group>
			  </el-form-item>
			<el-form-item label="企业" prop="company_id">
				<el-select
				  v-model="form.company_id"
				  filterable
				  remote
				  placeholder="请输入关键词"
				  :remote-method="getCompany"
				  :loading="loading"
				  clearable
				  class="w-50">
				  <el-option
					v-for="item in CompanyData"
					:key="item.id"
					:label="item.title"
					:value="item.id">
				  </el-option>
				</el-select>
			</el-form-item>
			  <div v-if="form.type==='jobs'">
				  <el-form-item label="职位增值筛选">
				  	<el-checkbox v-model="form.top" :true-label="1" false-label="all">置顶</el-checkbox>
				  	<el-checkbox v-model="form.recommend" :true-label="1" false-label="all">推荐</el-checkbox>
				  	<el-checkbox v-model="form.urgent" :true-label="1" false-label="all">紧急招聘</el-checkbox>
				  	<el-checkbox v-model="form.is_famous" :true-label="1" false-label="all">名企</el-checkbox>
				  </el-form-item>

				  <el-form-item label="来源" prop="app_id">
					  <el-checkbox-group v-model="form.app_id">
					    <el-checkbox v-for="(v,index) in ClientApp" :label="v.app_id">{{v.app_name}}</el-checkbox>
					  </el-checkbox-group>
				  </el-form-item>

				  <el-form-item label="会员" prop="vip">
					  <el-checkbox-group v-model="form.vip_level">
					    <el-checkbox v-for="(v,index) in vip" :label="v.level" v-if="v.is_company">{{v.title}}</el-checkbox>
					  </el-checkbox-group>
				  </el-form-item>

				  <el-form-item label="发布时间" prop="time">
				  	<el-date-picker
				      v-model="form.time"
				      type="daterange"
				      align="right"
				      unlink-panels
				      clearable
				      range-separator="至"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期"
	      			  value-format="timestamp"
				      :picker-options="pickerOptions"
				      class="w-50">
				    </el-date-picker>
				  </el-form-item>

				  <el-form-item label="区域" prop="area">
				    <el-cascader 
				    	v-model="form.area"
				    	placeholder="试试搜索：北京"
				    	filterable
				    	clearable
						:props="areaProps"
				    	:options="arealist"
				    	class="w-50">
				    </el-cascader>
				  </el-form-item>

				  <el-form-item label="职位类别" prop="jobs_cid">
				  	<el-cascader
					    v-model="form.jobs_cid"
					    :options="jobscatelist"
					    placeholder="请选择"
					    :props="defaultProps"
					    filterable
					    collapse-tags
					    clearable
					    :show-all-levels="false"
				    	class="w-50">
				    </el-cascader>
				  </el-form-item>
			  </div>
			  <div v-if="form.type==='company'">
				  <el-form-item label="企业筛选">
				  	<el-checkbox v-model="form.is_famous" :true-label="1" false-label="all">名企</el-checkbox>
				  </el-form-item>

				  <el-form-item label="来源" prop="app_id">
					  <el-checkbox-group v-model="form.app_id">
					    <el-checkbox v-for="(v,index) in ClientApp" :label="v.app_id">{{v.app_name}}</el-checkbox>
					  </el-checkbox-group>
				  </el-form-item>

				  <el-form-item label="会员" prop="vip">
					  <el-checkbox-group v-model="form.vip_level">
					    <el-checkbox v-for="(v,index) in vip" :label="v.level" v-if="v.is_company">{{v.title}}</el-checkbox>
					  </el-checkbox-group>
				  </el-form-item>

				  <el-form-item label="注册时间" prop="time">
				  	<el-date-picker
				      v-model="form.time"
				      type="daterange"
				      align="right"
				      unlink-panels
				      range-separator="至"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期"
	      			  value-format="timestamp"
				      :picker-options="pickerOptions"
				      class="w-50">
				    </el-date-picker>
				  </el-form-item>

				  <el-form-item label="区域" prop="area">
				    <el-cascader 
				    	v-model="form.area"
				    	placeholder="试试搜索：北京"
				    	filterable
						:props="areaProps"
				    	:options="arealist"
				    	class="w-50">
				    </el-cascader>
				  </el-form-item>
			  </div>
			  <el-form-item label="排序" prop="prop">
			    <el-radio-group class="ml-0 ml-sm-2" v-model="form.prop">
			      <el-radio :label="'default'">默认</el-radio>
			      <el-radio :label="'recommend'">推荐</el-radio>
			      <el-radio :label="'rand'">随机</el-radio>
			    </el-radio-group>
			  </el-form-item>
			  <el-form-item label="数量" prop="sum">
			    <el-radio-group class="ml-0 ml-sm-2" v-model="form.sum">
			      <el-radio :label="5">5条</el-radio>
			      <el-radio :label="10">10条</el-radio>
			      <el-radio :label="20">20条</el-radio>
			      <el-radio :label="30">30条</el-radio>
			      <el-radio :label="40">40条</el-radio>
			      <el-radio :label="50">50条</el-radio>
			    </el-radio-group>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary" @click="submitForm('form')">筛 选</el-button>
			  </el-form-item>
			</el-form>
		</div>
		<div class="flex-1 pl-3">
			<el-divider content-position="left">预览</el-divider>
			<div class="flex">
				<div>
					<div class="wx-wechat wrap">
						<div class="wx-wechat-header">
							{:config('web.name')}
						</div>
						<div class="wx-wechat-body flex1 p-3" id="wechatContentTextBody">
						<section><br/></section>
						<section v-for="(v,index) in tableData" style="margin-bottom: 30px;">
						<section style="margin: 10px 0px;text-align: center;" v-if="form.type==='jobs'">
							{include file="wechat/tweets/tweets_tpl_jobs"/}
						</section>
						<section style="margin: 10px 0px;text-align: center;" v-if="form.type==='company'">
							{include file="wechat/tweets/tweets_tpl_company"/}
						</section>
						</section>
						<section><br/></section>
						</div>
					</div>
					<div class="text-center py-3" v-if="tableData.length">
						<el-button type="primary" @click="copyContent" id="copyContent">一键复制</el-button>
					</div>
				</div>
				<div class="flex-1 pl-3">
					<el-form label-width="120px" label-position="top">
					  <el-form-item label="风格" prop="themeStyle">
						  <el-select v-model="themeStyle"
						  @change="setThemeStyle">
						    <el-option
						      v-for="item in themeStyleList"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
					  </el-form-item>
					  <el-form-item class="mb-0" label="颜色（部分风格支持）" prop="sum">
					  	<div class="flex" style="line-height: 1">
					  		<div class="px-3 text-center small">
								<el-color-picker v-model="JobsStyle.themeColor" size="mini"></el-color-picker>
								<p>主题</p>
					  		</div>
					  		<div class="px-3 text-center small">
								<el-color-picker v-model="JobsStyle.themeColor2" size="mini"></el-color-picker>
								<p>主题2</p>
					  		</div>
					  		<div class="px-3 text-center small">
								<el-color-picker v-model="JobsStyle.body.color" size="mini"></el-color-picker>
								<p>主体</p>
					  		</div>
					  		<div class="px-3 text-center small">
								<el-color-picker v-model="JobsStyle.salary.color" size="mini"></el-color-picker>
								<p>薪资</p>
					  		</div>
					  		<div class="px-3 text-center small">
								<el-color-picker v-model="JobsStyle.title.backgroundColor" size="mini" show-alpha></el-color-picker>
								<p>标题背景</p>
					  		</div>
					  		<div class="px-3 text-center small">
								<el-color-picker v-model="JobsStyle.title.color" size="mini"></el-color-picker>
								<p>标题</p>
					  		</div>
					  		<div class="px-3 text-center small">
								<el-color-picker v-model="JobsStyle.welfare.backgroundColor" size="mini"></el-color-picker>
								<p>福利背景</p>
					  		</div>
					  		<div class="px-3 text-center small">
								<el-color-picker v-model="JobsStyle.welfare.color" size="mini"></el-color-picker>
								<p>福利</p>
					  		</div>
					  	</div>
					  </el-form-item>
				  <el-form-item class="mb-0" label="链接">
				    <el-radio-group class="ml-0 ml-sm-2" v-model="links_type">
				      <el-radio :label="'mp'">小程序</el-radio>
				      <el-radio :label="'h5'">H5</el-radio>
				      <el-radio :label="'none'">无</el-radio>
				    </el-radio-group>
				  </el-form-item>
					<div v-if="form.type==='jobs'">
					  <el-form-item label="职位信息">
					  	<el-checkbox v-model="showJobsItem.info">职位要求</el-checkbox>
					  	<el-checkbox v-model="showJobsItem.contacts">联系人</el-checkbox>
					  	<el-checkbox v-model="showJobsItem.welfare">职位福利</el-checkbox>
					  	<el-checkbox v-model="showJobsItem.desc">职位详情</el-checkbox>
					  </el-form-item>
					  </div>
					<div v-if="form.type==='company'">
					  <el-form-item label="企业信息">
					  	<el-checkbox v-model="showCompanyItem.info">企业基本信息</el-checkbox>
					  	<el-checkbox v-model="showCompanyItem.contacts">联系人</el-checkbox>
					  	<el-checkbox v-model="showCompanyItem.address">地址</el-checkbox>
					  	<el-checkbox v-model="showCompanyItem.welfare">企业福利</el-checkbox>
					  	<el-checkbox v-model="showCompanyItem.desc">企业简介</el-checkbox>
					  	<el-checkbox v-model="showCompanyItem.jobs">企业职位</el-checkbox>
					  </el-form-item>
					  <el-form-item label="职位"
					  v-show="showCompanyItem.jobs">
					  	<div v-for="(v,index) in tableData">
					  		<div>
					  			<el-checkbox v-model="v.showjobs" :true-label="1" :false-label="0">{{v.title}}</el-checkbox>
					  		</div>
					  		<div v-for="(jobs,jobs_index) in v.jobs"
					  		v-if="v.showjobs"
					  		class="pl-5">
					  			<el-checkbox v-model="jobs.status" :true-label="1" :false-label="0">{{jobs.title}} {{jobs.salary_min>0?(v.jobs_salary_show_type?(jobs.salary_min)+'~'+(jobs.salary_max)+'元':jobs.salary_min/1000+'~'+jobs.salary_max/1000+'k'):'面议'}}{{jobs.salary_year>12?' · '+jobs.salary_year+'薪':''}}</el-checkbox>
					  		</div>
					  	</div>
					  </el-form-item>
					</div>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="script"}
{js href="__PLUGIN_SRC__/Clipboard/clipboard.min.js"}
<script type="text/javascript">
	{empty name="vip"}
	var vip=[];
	{else/}
	var vip={:json_encode($vip,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="ClientApp"}
	var ClientApp=[];
	{else/}
	var ClientApp={:json_encode($ClientApp,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="arealist"}
	var arealist=[];
	{else/}
	var arealist={:json_encode($arealist,JSON_UNESCAPED_UNICODE)};
	{/empty}
	var jobscatelist={xycms:jobscate serialize="json"/};
	{empty name="Find"}
	var formData={
				type:'jobs',
				top:'all',
				recommend:'all',
				urgent:'all',
				is_famous:'all',
				app_id:[],
				vip_level:[],
				sum:5,
				time:[],
				area:[],
				jobs_cid:[],
				prop:'default',
			};
	{else/}
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			links_type:'mp',
			vip:vip,
			ClientApp:ClientApp,
			arealist:arealist,
			jobscatelist:jobscatelist,
			loading:false,
			xy_wechatminiprogram_status:{:config('xy_wechatminiprogram.status')},
			themeStyle:0,
			themeStyleList:[
				{value:0,label:'风格一',color:'#ff0000',color2:'#ffffff'},
				{value:1,label:'风格二',color:'#1d82f8',color2:'#ffffff'},
				{value:2,label:'风格三',color:'#1d82f8',color2:'#ffffff'},
				{value:3,label:'风格四',color:'#0070c0',color2:'#70acff'},
				{value:4,label:'风格五',color:'#e7d2b3',color2:'#ffffff'},
				{value:5,label:'风格六',color:'#e7d2b3',color2:'#ffffff'},
				{value:6,label:'风格七',color:'#90addd',color2:'#ffffff'},
				{value:7,label:'风格八',color:'#0000cf',color2:'#ffffff'},
				{value:8,label:'风格九',color:'#e3efff',color2:'#e3e7ff'},
			],
			JobsStyle:{
				themeColor:'#e7d2b3',
				themeColor2:'#ffffff',
				body:{
					color:'#343434',
				},
				salary:{
					color:'#6187ED',
				},
				title:{
					color:'#483d3d',
					backgroundColor:'rgba(255,255,255,0)',
				},
				welfare:{
					backgroundColor:'#409eff',
					color:'#ffffff',
				},
			},
			showJobsItem:{
				contacts:true,
				info:true,
				desc:true,
				welfare:true,
			},
			showCompanyItem:{
				contacts:true,
				address:true,
				info:true,
				desc:true,
				welfare:true,
				jobs:true,
			},
	        areaProps: {
	          	value: 'id',
	          	label: 'title',
	          	children: 'data',
	          	checkStrictly:true
	        },
	        defaultProps: {
	          	value: 'id',
	          	label: 'title',
	          	children: 'data',
	          	multiple: true
	        },
	        pickerOptions: {
	          shortcuts: [{
	            text: '今日',
	            onClick(picker) {
	              const start = new Date(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 1);
				  const end = new Date();
	              picker.$emit('pick', [start, end]);
	            }
	          },{
	            text: '昨日',
	            onClick(picker) {
	              const start = new Date();
				  start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
				  const end = new Date(new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 1);
	              picker.$emit('pick', [start, end]);
	            }
	          },{
	            text: '最近三天',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 4);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近一周',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 8);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近一个月',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 31);
	              picker.$emit('pick', [start, end]);
	            }
	          }],
	          disabledDate:function(event){
	            const now = new Date();
	          	return now.getTime()<event.getTime();
	          }
	        },
			form:formData,
			tableData:[],
			CompanyData:[],
	        rules: {
	        }
		},
		watch:{
		    view:XYBase.viewWatch
		},
		created(){
			XYBase.created(this);
		},
		methods:{
	    	conGetHtml:function(str){
		      if (str) {
		        return str.replace(/\n/g, '<br/>');
		      }else{
		        return '';
		      }
		    },
			setThemeStyle(val){
				var obj=this.themeStyleList[val];
				this.JobsStyle.themeColor=obj.color;
				this.JobsStyle.themeColor2=obj.color2;
			},
			copyContent(){
				var clip = new ClipboardJS('#copyContent', {
				// 通过target指定要复印的节点
				target: function() {return document.getElementById('wechatContentTextBody');}
				});
				clip.on('success', function(e) {
				    e.clearSelection();
					XYBase.success('已复制');
					clip.destroy();
				});
				clip.on('error', function(e) {
					console.log(e);
					clip.destroy();
				});
			},
			getCompany(queryString){
				this.loading=true;
				var _this=this;
				$.ajax({
					url:'/company',
					data:{
						search_type:'company_name',
						key:queryString,
						attestation:'all',
						page:1,
						pageSize:10
					},
					type:'GET',
					dataType:'json',
					error:function(){
						_this.loading=false;
					},
					success:function(ret){
						_this.loading=false;
						if(ret){
							_this.CompanyData=ret.data.data
						}
					},
				})
			},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:'',
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									_this.tableData=ret.data.data;
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}